<template>
  <div class="course-container">
    <div class="header-section">
      <div class="header-content">
        <div class="year-selector">
          <el-select
              placeholder="Please select a school year"
              v-model="cdata.marjor"
              clearable
              @change="handleChange"
              class="custom-select"
          >
            <el-option
                :key="item.dicinfovalue"
                :label="item.dicinfoname"
                :value="item.dicinfovalue"
                v-for="item in sydata.list"
            />
          </el-select>
        </div>
        <div class="teacher-action" v-if="cdata.isTeacher">
          <a href="/public#/courselist">
            <el-button type="primary" :icon="Plus" circle class="add-course-btn1"/>
          </a>
        </div>
      </div>
    </div>

    <div class="course-grid">
      <div
          class="course-card"
          v-for="(item, index) in teadata.list"
          :key="index"
      >
        <div class="card-image">
          <img :src="serverurl+item.imgurl" alt="Course cover" class="course-cover"/>
          <div class="live-badge" v-if="item.islive == 1">
            <el-icon><Check /></el-icon>
            <span>Live</span>
          </div>
        </div>
        <div class="card-footer">
          <div class="teacher-info">
            <img :src="serverurl+item.userimgurl" alt="Teacher" class="teacher-avatar"/>
            <a
                :href="'/#/lession?courseid='+item.id+'&name='+item.name"
                class="course-title"
            >
              {{item.name}}
            </a>
          </div>
          <div class="teacher-name">
            {{item.personname}}
          </div>
        </div>
      </div>
    </div>

    <div class="pagination-wrapper">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="cdata.pageNum"
          :page-size="9"
          layout="prev, pager, next, jumper"
          :total="cdata.total"
          class="custom-pagination"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
//import TopHeader from '../../components/TopHeader.vue' // 引用Header组件
//import TopBottom from '../../components/TopBottom.vue' // 引用Header组件

import { reactive,ref,onMounted} from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { getAllCourseList,getSchoolYear,isTeacher } from '../../api/course.ts'

const env = import.meta.env
const serverurl:string = env['VITE_APP_BASE_API']

const cdata = reactive({
  marjor:'',
  pageNum: 1,
  pageSize: 9,
  total:0,
  isTeacher:false
})
//课程列表
const teadata = reactive({
  list:[]
})
//学年列表
const sydata = reactive({
  list:[]
})

onMounted(() => {
  loaddata();
})

function loaddata()
{
  const regdata = {"marjor":cdata.marjor,"pagenum":cdata.pageNum,"pagesize":cdata.pageSize};

  getAllCourseList(regdata).then((res) => {
    if (res.code == 200)
    {
      teadata.list = res.data;
      cdata.total = res.page.total;
    }
  })
  getSchoolYear().then((res) => {
    if (res.code == 200)
    {
      sydata.list = res.data;
    }
  })
  isTeacher().then((res) => {
    if (res.code == 200)
    {
      cdata.isTeacher = res.data;
    }
  })
}

function handleChange(value)
{
  cdata.marjor = value;
  loaddata();
}

function handleSizeChange(val) {
  console.log(`每页 ${val} 条`);
}
function handleCurrentChange(val) {
  console.log(`当前页: `+val);
  cdata.pageNum = val;
  loaddata();

}
</script>

<style lang="less" scoped>
.course-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.header-section {
  margin-bottom: 30px;

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
  }

  .custom-select {
    width: 240px;

    :deep(.el-input__inner) {
      border-radius: 20px;
      border: 1px solid #e2e8f0;
      height: 40px;
      line-height: 40px;

      &:focus {
        border-color: #4f46e5;
        box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.2);
      }
    }
  }

  .add-course-btn {
    background-color: #4f46e5;
    border: none;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
    transition: all 0.3s ease;

    &:hover {
      background-color: #4338ca;
      transform: scale(1.05);
    }
  }
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.course-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  }

  .card-image {
    position: relative;
    height: 200px;
    overflow: hidden;

    .course-cover {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    &:hover .course-cover {
      transform: scale(1.05);
    }

    .live-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 5px;

      .el-icon {
        font-size: 14px;
        color: #10b981;
      }
    }
  }

  .card-footer {
    padding: 15px;

    .teacher-info {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 5px;

      .teacher-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #f0f0f0;
      }

      .course-title {
        font-weight: 600;
        color: #2c3e50;
        text-decoration: none;
        transition: color 0.2s;

        &:hover {
          color: #4f46e5;
        }
      }
    }

    .teacher-name {
      font-size: 12px;
      color: #64748b;
      padding-left: 50px;
    }
  }
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 30px;

  .custom-pagination {
    :deep(.btn-prev),
    :deep(.btn-next) {
      border-radius: 8px;
      border: 1px solid #e2e8f0;

      &:hover {
        color: #4f46e5;
      }
    }

    :deep(.number) {
      border-radius: 8px;
      border: 1px solid #e2e8f0;

      &:hover {
        color: #4f46e5;
      }
    }

    :deep(.active) {
      background-color: #4f46e5;
      color: white;
      border-color: #4f46e5;

      &:hover {
        color: white;
      }
    }

    :deep(.jumper) {
      input {
        border-radius: 8px;
        border: 1px solid #e2e8f0;

        &:focus {
          border-color: #4f46e5;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .course-container {
    padding: 15px;
  }

  .header-content {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .course-grid {
    grid-template-columns: 1fr;
  }

  .custom-select {
    width: 100% !important;
  }
}
</style>
